<template>
  <div>
    <div id="gantt" style="width: 100%; height: 650px">任务进度</div>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  methods: {
    ganttChart() {
      var myChart = this.$echarts.init(document.getElementById("gantt"));
      let projectItem = [
          "任务一",
          "任务二",
          "任务三",
          "任务四",
          "任务五",
          "任务六",
        ],
        projectItemStart = [
          "2021-01-01 12:32:09",
          "2021-01-02 12:32:09",
          "2021-01-10 12:32:09",
          "2021-01-14 12:32:09",
          "2021-01-03 12:32:09",
          "2021-01-18 12:32:09",
        ],
        projectItemEnd = [
          "2021-01-03 10:32:09",
          "2021-01-12 06:32:09",
          "2021-01-16 16:32:09",
          "2021-01-17 15:32:09",
          "2021-01-09 16:32:09",
          "2021-01-23 18:32:09",
        ];
      let projectItemStartValue = projectItemStart.map((item) => {
        return new Date(item).valueOf(); // 在这把日期转换成数字
      });
      let projectItemDuringValue = projectItemEnd.map((item, i) => {
        return new Date(item).valueOf() - projectItemStartValue[i];
      });

      let dateMin = projectItemStartValue[0];
      myChart.setOption({
        title: {
          subtext: "任务日期",
        },
        tooltip: {
          trigger: "axis",
          formatter: function (params) {
            const tar = params[1];
            let start;
            let enDate;
            for (let i = 0; i < projectItem.length; i++) {
              if (tar.axisValue === projectItem[i]) {
                start = projectItemStart[i];
                enDate = projectItemEnd[i];
              }
            }
            return (
              tar.name +
              "<br/>" +
              tar.seriesName +
              " : " +
              Math.round(tar.value / (1000 * 60 * 60 * 24)) +
              "天" +
              "<br/>" +
              "开始：" +
              start +
              "<br/>" +
              "结束：" +
              enDate
            );
          },
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "15%",
          containLabel: true,
        },
        yAxis: {
          type: "category",
          splitLine: {
            show: false,
          },
          data: projectItem,
        },
        xAxis: {
          type: "value",
          min: dateMin,
          axisLabel: {
            color: "#333", // 坐标轴文字颜色
            formatter: function (param) {
              let date = new Date(param);
              let dateLabel =
                date.getFullYear() +
                "-" +
                (date.getMonth() + 1) +
                "-" +
                date.getDate(); //x轴显示的日期格式
              return dateLabel;
            },
          },
        },
        series: [
          {
            name: "Placeholder",
            type: "bar",
            stack: "Total",
            itemStyle: {
              borderColor: "transparent",
              color: "transparent",
            },
            emphasis: {
              itemStyle: {
                borderColor: "transparent",
                color: "transparent",
              },
            },
            data: projectItemStartValue,
          },
          {
            name: "周期",
            type: "bar",
            stack: "Total",
            barWidth: "30%",
            itemStyle: {
              normal: {
                color: function (params) {
                  var dater = params.data / (1000 * 60 * 60 * 24);
                  //自定义颜色
                  let number;
                  if (dater < 3) {
                    number = 0;
                  } else if (dater < 5) {
                    number = 1;
                  } else {
                    number = 2;
                  }
                  const colorList = ["#f6071c", "#faa019", "#0aeabc"];
                  return colorList[number];
                },
              },
            },
            data: projectItemDuringValue,
          },
        ],
      });
    },
  },
  mounted() {
    this.ganttChart();
  },
};
</script>

<style lang="scss" scoped>
</style>